<template>
  <div class="countdown-example">
    <h3>倒计时按钮指令示例</h3>
    
    <div class="example-section">
      <h4>基础用法</h4>
      <p>点击按钮后会倒计时60秒，期间按钮不可点击</p>
      <button 
        class="btn btn-primary"
        v-countdown="{ seconds: 60, key: 'basic-example' }"
        @click="handleBasicClick"
      >
        发送验证码
      </button>
    </div>

    <div class="example-section">
      <h4>自定义倒计时文本</h4>
      <p>可以自定义倒计时显示的文本，使用 {seconds} 占位符</p>
      <button 
        class="btn btn-success"
        v-countdown="{ 
          seconds: 30, 
          key: 'custom-text-example',
          text: '请等待 {seconds} 秒后重试'
        }"
        @click="handleCustomTextClick"
      >
        提交表单
      </button>
    </div>

    <div class="example-section">
      <h4>不同倒计时时长</h4>
      <p>可以设置不同的倒计时时长</p>
      <div class="button-group">
        <button 
          class="btn btn-warning"
          v-countdown="{ seconds: 10, key: 'short-example' }"
          @click="handleShortClick"
        >
          10秒倒计时
        </button>
        <button 
          class="btn btn-info"
          v-countdown="{ seconds: 120, key: 'long-example' }"
          @click="handleLongClick"
        >
          2分钟倒计时
        </button>
      </div>
    </div>

    <div class="example-section">
      <h4>持久化测试</h4>
      <p>点击按钮后刷新页面，倒计时状态会保持</p>
      <button 
        class="btn btn-danger"
        v-countdown="{ 
          seconds: 90, 
          key: 'persistent-example',
          text: '倒计时剩余 {seconds} 秒'
        }"
        @click="handlePersistentClick"
      >
        持久化倒计时
      </button>
      <button class="btn btn-secondary ml-2" @click="refreshPage">
        刷新页面测试
      </button>
    </div>

    <div class="usage-info">
      <h4>使用说明</h4>
      <ul>
        <li><strong>seconds</strong>: 倒计时秒数（必需）</li>
        <li><strong>key</strong>: 唯一标识符，用于持久化存储（可选，建议提供）</li>
        <li><strong>text</strong>: 自定义倒计时文本，使用 {seconds} 作为秒数占位符（可选）</li>
      </ul>
      
      <h4>代码示例</h4>
      <pre><code>&lt;button v-countdown="{ seconds: 60, key: 'my-button' }"&gt;
  发送验证码
&lt;/button&gt;

&lt;button v-countdown="{ 
  seconds: 30, 
  key: 'submit-btn',
  text: '请等待 {seconds} 秒后重试'
}"&gt;
  提交表单
&lt;/button&gt;</code></pre>
    </div>
  </div>
</template>

<script setup lang="ts">
import { message } from 'ant-design-vue'

const handleBasicClick = () => {
  message.success('验证码已发送！')
}

const handleCustomTextClick = () => {
  message.success('表单提交成功！')
}

const handleShortClick = () => {
  message.info('短倒计时触发！')
}

const handleLongClick = () => {
  message.info('长倒计时触发！')
}

const handlePersistentClick = () => {
  message.success('持久化倒计时已开始，可以刷新页面测试！')
}

const refreshPage = () => {
  window.location.reload()
}
</script>

<style scoped>
.countdown-example {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.example-section {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  background-color: #fafafa;
}

.example-section h4 {
  margin-top: 0;
  color: #333;
}

.example-section p {
  color: #666;
  margin-bottom: 15px;
}

.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s;
}

.btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn:disabled {
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

.btn-primary {
  background-color: #1890ff;
  color: white;
}

.btn-success {
  background-color: #52c41a;
  color: white;
}

.btn-warning {
  background-color: #faad14;
  color: white;
}

.btn-info {
  background-color: #13c2c2;
  color: white;
}

.btn-danger {
  background-color: #ff4d4f;
  color: white;
}

.btn-secondary {
  background-color: #d9d9d9;
  color: #333;
}

.button-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.ml-2 {
  margin-left: 10px;
}

.usage-info {
  margin-top: 40px;
  padding: 20px;
  background-color: #f6f8fa;
  border-radius: 8px;
}

.usage-info h4 {
  color: #333;
  margin-bottom: 10px;
}

.usage-info ul {
  margin-bottom: 20px;
}

.usage-info li {
  margin-bottom: 5px;
  color: #666;
}

.usage-info pre {
  background-color: #f1f3f4;
  padding: 15px;
  border-radius: 4px;
  overflow-x: auto;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  line-height: 1.4;
}

.usage-info code {
  color: #d73a49;
}
</style>
